<template>
  <div>
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item,i) in bannerCats" :key="i">
        <img class="w-100" style="height:1.40rem" :src="item.image" alt>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination pagination-home text-right px-2" slot="pagination"></div>
    </swiper>
    <div class="bg-light-2" style="height:.12rem"></div>
    <div class="nav-icons bg-white text-center pt-1 text-dark-1">
      <div class="nav-icon d-flex flex-wrap">
        <div class="nav-item mb-3">
          <i class="sprite sprite-news mt-2"></i>
          <div class="fs-xs">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story mt-2"></i>
          <div class="fs-xs">故事站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shop mt-2"></i>
          <div class="fs-xs">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-experience mt-2"></i>
          <div class="fs-xs">体验服</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-Newborn mt-2"></i>
          <div class="fs-xs">新人专区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-inherit mt-2"></i>
          <div class="fs-xs">荣耀传承</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-Community mt-2"></i>
          <div class="fs-xs">同人社区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-Camp mt-2"></i>
          <div class="fs-xs">王者营地</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-Public mt-2"></i>
          <div class="fs-xs">公众号</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span>收起</span>
      </div>
    </div>
    <m-listcard icon="menu" title="新闻资讯" :categories="newsCats">
      <template #category="{category}">
        <router-link
          tag="div"
          class="muban py-2 fs-md d-flex"
          v-for="(news,index) in category.list"
          :key="index"
          :to="`/articles/${news.id}`"
        >
          <span class="muban1 text-info">[{{news.name}}]</span>
          <span class="muban2">|</span>
          <span class="muban3 flex-grow-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="muban4 text-grey-1">{{news.date}}</span>
        </router-link>
      </template>
    </m-listcard>
    <m-listcard icon="heroMenu" title="英雄列表" :categories="heroCats">
      <template #category="{category}">
        <div class="d-flex flex-wrap" style="box-sizing: border-box;  margin: 0 -0.05rem;">
          <router-link
            tag="div"
            style="box-sizing: border-box; width: 20%;"
            class="p-1 text-center"
            v-for="(hero, i) in category.heros"
            :key="i"
            :to="`/heros/${hero.id}`"
          >
            <img :src="hero.avatar" style="width:.48rem;height:auto">
            <span class="fs-sm">{{hero.name}}</span>
          </router-link>
        </div>
      </template>
    </m-listcard>
  </div>
</template>
<script>
export default {

  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      bannerCats: [],
      newsCats: [],
      heroCats: []
    };
  },
  methods: {
    async fetchBannersList() {
      const res = await this.$http.get("banner/list");
      this.bannerCats = res.data.data[0].aditems;
    },
    async fetchNewsList() {
      const res = await this.$http.get("news/list");
      const newsList0 = res.data.newsList;
      const newsList = newsList0.map(item => ({
        id: item.id,
        categoryname: item.categoryname,
        title: item.title,
        date: item.date.substr(5, 5),
        name: item.name
      }));
      let categoryName = [];
      newsList.forEach(item => {
        if (categoryName.indexOf(item.categoryname) == -1) {
          categoryName.push(item.categoryname);
        }
      });
      categoryName.forEach(item => {
        let list = [];
        newsList.forEach(i => {
          if (i.categoryname == item && list.length < 5) {
            list.push(i);
          }
        });
        let obj = { name: item, list: list };
        this.newsCats.push(obj);
      });
    },
    async fetchHerosList() {
      const res = await this.$http.get("Heros/list");
      this.heroCats = res.data.herosList;
      console.log(res.data.herosList)
    }
  },
  created() {
    this.fetchBannersList();
    this.fetchNewsList();
    this.fetchHerosList();
  }
};
</script>
<style lang="scss">
@import "../assets/variables";

.pagination-home {
  box-sizing: border-box;
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.02rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}

.nav-icons {
  box-sizing: border-box;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-icon {
    .nav-item {
      box-sizing: border-box;
      width: 25%;
      border-right: 1px solid $border-color;
      &:nth-child(4n) {
        border-right: none;
      }
    }
  }
}

.muban {
  box-sizing: border-box;
  .muban1 {
    width: 38px;
  }
  .muban3 {
    width: 60px;
  }
}
</style>

